// component/ganttChartCanvas/ganttChartCanvas.js
import {
  getDate,
  getLocaleString
} from '../../library/configGantt'
const sysInfo = wx.getSystemInfoSync()
const scaleRate = sysInfo.windowWidth / 750;
const platform = sysInfo.platform;
const ONE_DAY = 1000 * 60 * 60 * 24
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    width: {
      type: Number,
      value: 750
    },
    totalWidth: {
      type: Number,
      value: 1500
    },
    gantt: {
      type: Object
    },
    uuid: {
      type: String,
    },
    height: {
      type: String
    },
    elementHeight: {
      type: Number,
      value: 40
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    scaleRate,
    ganttList: [],
    userDisList: [],
    weekends: [],
    interval: 0,
    dateScroll: undefined,
    pointerX: 0,
    scrollY: 0,
    stablityScroll: 0,
    inited: false,
    start: undefined,
    end: undefined,
    oStart: undefined,
    oEnd: undefined,
    startRangeWidth: undefined,
    endRangeWidth: undefined,
    endRangeWidthX: undefined,
    users: undefined,
    missions: undefined,
    rulerWidth: 0,
    hasPointer: false,
    canAnimation: false, //platform !== 'ios'
    filterTimer: null,
    filterTask: null,
    clickTimer: null,
    explainTimer: null,
    explainOpacity: 1,
    explainDisplay: true,
  },
  lifetimes: {
    attached() {
      this.data.explainTimer = setTimeout(() => {
        this.setData({
          explainOpacity: 0
        })
        this.data.explainTimer = setTimeout(() => {
          this.setData({
            explainDisplay: false
          })
        }, 2000)
      }, 5000)
    },
    detached(){
      clearTimeout(this.data.explainTimer);
      clearTimeout(this.data.filterTimer);
      clearTimeout(this.data.filterTask);
      clearTimeout(this.data.clickTimer);
    }
  },
  observers: {
    'gantt': function(gantt) {
      if (!gantt) return;
      let stablityScroll;
      if (gantt.pointer.enable) {
        if (gantt.pointer.x > this.data.width / 2) {
          stablityScroll = (gantt.pointer.x - this.data.width / 2) * scaleRate;
        } else {
          stablityScroll = 0;
        }
      }
      this.setData({
        ganttList: gantt.ganttList,
        start: gantt.start,
        end: gantt.end,
        totalWidth: gantt.totalWidth,
        interval: gantt.interval,
        hasPointer: gantt.pointer.enable,
        pointerX: gantt.pointer.x,
        stablityScroll,
        dateScroll: stablityScroll,
        inited: true,
      })
      this.figureOutWeekends();
      this.figureOutRange(gantt.oStart, gantt.oEnd);
      this.filterUserDis();
    },
    'width': function(width) {
      this.setData({
        rulerWidth: width
      })
    },
    'uuid': function(uuid) {
      this.setData({
        rulerUuid: uuid
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onSelfScroll(e) {
      //检查组件是否显示在视图中
      if (e.detail.scrollLeft !== this.data.dateScroll) {
        //更新状态
        this.setData({
          dateScroll: e.detail.scrollLeft,
        })
        this.filterUserDis();
      }
      this.setData({
        scrollY: e.detail.scrollTop
      })
      if (this.data.explainTimer) {
        clearTimeout(this.data.explainTimer);
      }
      if (this.data.explainOpacity !== 1)
        this.setData({
          explainDisplay: true,
          explainOpacity: 1
        })
      this.data.explainTimer = setTimeout(() => {
        this.setData({
          explainOpacity: 0
        })
        this.data.explainTimer = setTimeout(() => {
          this.setData({
            explainDisplay: false
          })
        }, 2000)
      }, 5000)

    },
    checkUserDis() {
      const range = {
        left: this.data.dateScroll / scaleRate,
        right: this.data.dateScroll / scaleRate + this.data.width
      }
      let userDisList = [];
      for (let i = 0; i < this.data.ganttList.length; i++) {
        const gantt = this.data.ganttList[i];
        for (const item of gantt) {
          //确定该条形图在视图中
          if (
            (item.left >= range.left && item.left <= range.right) ||
            (item.right >= range.left && item.right <= range.right) || (item.left <= range.left && item.right >= range.right)) {
            //在视图中显示状态指示器和用户
            //计算指示器位置
            let left = item.left - range.left;
            if (left < 0) {
              if (item.right - range.left > 40) left = 40;
              else left = item.right - range.left;
            } else left += 40;
            userDisList.push({
              id: item.id,
              top: i * (this.data.elementHeight + 1),
              left,
              target: item
            })
          }
        }
      }
      this.setData({
        userDisList
      })
    },
    filterUserDis() {
      if (!this.data.filterTimer) {
        clearTimeout(this.data.filterTask);
        this.checkUserDis();
        this.data.filterTimer = setTimeout(() => {
          this.data.filterTimer = null
        }, 50)
      } else {
        clearTimeout(this.data.filterTask)
        this.data.filterTask = setTimeout(this.filterUserDis.bind(this), 50)
      }
    },
    figureOutWeekends() {
      let {
        start,
        end
      } = this.data;
      const weekends = [];
      start = getDate(start);
      end = getDate(end);
      // console.log( end )
      for (let i = start.getTime(), j = 0; i < end.getTime(); i += ONE_DAY, j += 1) {
        const tempDate = new Date(i);
        // console.log(tempDate)
        if (tempDate.getDay() == 6) {
          weekends.push({
            left: j * this.data.interval,
            width: 2 * this.data.interval
          })
          i += ONE_DAY * 6;
          j += 6;
        } else if (tempDate.getDay() == 0) {
          weekends.push({
            left: j * this.data.interval,
            width: 1 * this.data.interval
          })
          i += ONE_DAY * 5;
          j += 5;
        }
      }
      this.setData({
        weekends
      });
    },
    figureOutRange(start, end) {
      const tstart = getDate(start);
      const tend = getDate(end);
      const startRangeWidth = (tstart.getTime() - getDate(this.data.start).getTime()) / (ONE_DAY) * this.data.interval;
      const endRangeWidth = (getDate(this.data.end).getTime() - tend.getTime()) / (ONE_DAY) * this.data.interval;
      const endRangeX = (tend.getTime() - getDate(this.data.start).getTime() + ONE_DAY) / (ONE_DAY) * this.data.interval
      this.setData({
        startRangeWidth,
        endRangeWidth,
        endRangeX
      })
    },
    onLabelClick(e) {
      // console.log(e);
      if (this.data.clickTimer) {
        clearTimeout(this.data.clickTimer);
        this.triggerEvent('itemDoubleTap', {
          item: e.target.dataset.item,
          ...e.detail
        }, {
          bubbles: true,
          composed: true
        })
        this.data.clickTimer = null;
      } else {
        this.data.clickTimer = setTimeout(() => {
          this.data.clickTimer = null;
          this.triggerEvent('itemTap', {
            item: e.target.dataset.item,
            ...e.detail
          }, {
            bubbles: true,
            composed: true
          })
        }, 200);
      }
    }
  }
})